
@import 'reset.css';

img{
  max-width: 100%;
}

.bg-red{
  background-color: lightcoral;
}
.bg-green{
  background-color: lightgreen;
}
.bg-blue{
  background-color: cornflowerblue;
}

.center-horizon-position{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.center-horizon-margin{
  margin: 0 auto;
}

.animate-1s{
  transition: all 1s ease-out;
}
.animate-03s{
  transition: all 0.3s ease-out;
}

.text-white{
  color: #fff;
}
.text-red{
  color: #ff4343;
}

.font-size-21px{
  font-size: 21px;
}
.font-size-26px{
  font-size: 26px;
}

.bold{
  font-weight: bold;
}

/*通用caption*/
.page-caption{
  position: absolute;
  top: 21vw;
  width: 77vw;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.page-caption .caption-text{
  position: absolute;
  width: 64vw;
  height: 13.5vw;
  line-height: 13.5vw;
  right: 2vw;
  top: 0;
}

/*页面通用样式*/
.page{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease-out;
}
.page-before{
  transform: translate(0,-100%);
}
.page-after{
  transform: translate(0, 100%);
}

/*通用页面背景样式*/
.page{
  background: url(../image/page_bg.png) repeat-y center;
  background-size: 100% auto;
}
/*通用居中slogan*/
.page-center-text{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

/*通用footer*/
.page-footer{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

@keyframes rock{
  0%{ transform: translateX(-50%) rotate(0deg)}
  5%{ transform: translateX(-50%) rotate(3deg)}
  10%{ transform: translateX(-50%) rotate(-4deg)}
  15%{ transform: translateX(-50%) rotate(3deg)}
  20%{ transform: translateX(-50%) rotate(-2deg)}
  25%{ transform: translateX(-50%) rotate(1deg)}
  30%{ transform: translateX(-50%) rotate(-1deg)}
  70%{ transform: translateX(-50%) rotate(0deg)}
  100%{ transform: translateX(-50%) rotate(0deg)}
}
